<template>
  <div class="ne-container">
    <van-skeleton :row="12" :loading="loading">
      <div class="q-title">{{ article.bulletinTitle }}</div>
      <div class="q-date">{{ article.createTime }}</div>
      <div class="q-content" v-html="article.bulletinContent"></div>
      <img
        :src="article.bulletinPicUrl"
        style="width: 100%; margin-top: 10px"
      />
    </van-skeleton>
  </div>
</template>

<script>
import { tbHospitalBulletinList } from '../../api/tbHospitalBulletin'
export default {
  name: 'wx_pages_zhfw_hospitalNoticeDetail',
  data() {
    return {
      article: {},
      loading: false,
    }
  },
  methods: {
    async search() {
      const { indexCode } = this.$route.query
      if (indexCode) {
        this.loading = true
        let res = await tbHospitalBulletinList({ indexCode })
        this.loading = false
        uni.stopPullDownRefresh()
        if (res.data && res.data.length > 0) {
          this.article = res.data.pop()
        } else {
          this.article = {}
        }
      }
    },
  },
  onLoad() {
    this.search()
  },
}
</script>
<style lang="scss" scoped>
.q-title {
  color: $uni-color-primary;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.q-date {
  font-size: 13px;
  color: #666666;
  margin-bottom: 10px;
}
.ne-container {
  padding: 16px;
  .q-content {
    font-size: 16px;
    color: #666666;
    ::v-deep {
      img {
        display: block;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
      }
      h1 {
        font-size: 40rpx;
        font-weight: bold;
        margin: 24rpx 0;
        color: #333;
      }
      h2 {
        font-size: 36rpx;
        font-weight: bold;
        margin: 22rpx 0;
        color: #333;
      }
      h3 {
        font-size: 32rpx;
        font-weight: bold;
        margin: 20rpx 0;
        color: #333;
      }
      h4 {
        font-size: 30rpx;
        font-weight: bold;
        margin: 18rpx 0;
        color: #333;
      }
      h5 {
        font-size: 28rpx;
        font-weight: bold;
        margin: 16rpx 0;
        color: #333;
      }
      h6 {
        font-size: 26rpx;
        font-weight: bold;
        margin: 14rpx 0;
        color: #333;
      }
      strong {
        font-weight: bold;
      }
      hr {
        border: none;
        border-top: 1px solid #eee;
        margin: 20rpx 0;
      }
      ul {
        padding-left: 40rpx;
        margin: 10rpx 0;
      }
      li {
        margin: 10rpx 0;
        list-style-type: disc;
      }
      br {
        display: block;
        content: '';
        margin: 10rpx 0;
      }
      p {
        text-indent: 2em !important;
        color: #333;
        padding: 10rpx 0;
      }
    }
  }
}
</style>

<style>
.q-content img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}
</style>
